<template>
  <div>
    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px"
        label-position="top">
        <el-col :span="11">
          <el-form-item label="代工厂" prop="field106">
            <el-input v-model="formData.field106" placeholder="请输入代工厂" readonly clearable
              prefix-icon='el-icon-s-tools' :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="管理归属" prop="field108">
            <el-input v-model="formData.field108" placeholder="请输入管理归属" readonly clearable
              prefix-icon='el-icon-s-tools' :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-row gutter="11">
            <el-col :span="11">
              <el-form-item label="电子元器件-进货数量" prop="field119">
                <el-input v-model="formData.field119" placeholder="请输入进货的数量电子元器件电子元器件-进货数量" :maxlength="50"
                  clearable :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="电子元器件-消耗数量" prop="field107">
                <el-input v-model="formData.field107" placeholder="请输入消耗的电子元器件数量" :maxlength="50" clearable
                  :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-row gutter="15">
            <el-col :span="11">
              <el-form-item label="机械零部件-进货数量" prop="field108">
                <el-input v-model="formData.field108" placeholder="请输入机械零部件的进货数量" :maxlength="50" clearable
                  :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="机械零部件-消耗数量" prop="field109">
                <el-input v-model="formData.field109" placeholder="请输入机械零部件的消耗数量" :maxlength="50" clearable
                  :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-row gutter="15">
                <el-col :span="11">
                  <el-form-item label="其他原材料-进货数量" prop="field110">
                    <el-input v-model="formData.field110" placeholder="请输入其他原材料的进货数量" :maxlength="50"
                      clearable :style="{width: '100%'}"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="其他原材料-消耗数量" prop="field111">
                    <el-input v-model="formData.field111" placeholder="请输入其他原材料的消耗数量" :maxlength="50"
                      clearable :style="{width: '100%'}"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-row gutter="11">
            <el-col :span="8">
              <el-form-item label="砂MB值智能采集终端-新增任务量/台套" prop="field117">
                <el-input v-model="formData.field117" placeholder="砂MB值智能采集终端-新增任务量/台套" :maxlength="50"
                  clearable :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="砂MB值智能采集终端-产量/台套" prop="field118">
                <el-input v-model="formData.field118" :maxlength="50" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="砂MB值智能采集终端-出货量/台套" prop="field119">
                <el-input v-model="formData.field119" :maxlength="50" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-row gutter="11">
            <el-col :span="8">
              <el-form-item label="砂性能一体化智能采集终端-新增任务量/台套" prop="field121">
                <el-input v-model="formData.field121" :maxlength="50" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="砂性能一体化智能采集终端-产量/台套" prop="field122">
                <el-input v-model="formData.field122" :maxlength="50" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="砂性能一体化智能采集终端-出货量/台套" prop="field123">
                <el-input v-model="formData.field123" :maxlength="50" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-row gutter="11">
            <el-col :span="8">
              <el-form-item label="砂饱和面干吸水率智能采集终端-新增任务量/台套" prop="field125">
                <el-input v-model="formData.field125" :maxlength="50" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="砂饱和面干吸水率智能采集终端-产量/台套" prop="field126">
                <el-input v-model="formData.field126" :maxlength="50" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="砂饱和面干吸水率智能采集终端-出货量/台套" prop="field127">
                <el-input v-model="formData.field127" :maxlength="50" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      formData: {
        field106: '智能制造',
        field108: '智能制造研究所',
        field119: '',
        field107: '',
        field108: '',
        field109: '',
        field110: '',
        field111: '',
        field117: '',
        field118: '',
        field119: '',
        field121: '',
        field122: '',
        field123: '',
        field125: '',
        field126: '',
        field127: '',
      },
      rules: {
        field106: [{
          required: true,
          message: '请输入代工厂',
          trigger: 'blur'
        }],
        field108: [{
          required: true,
          message: '请输入管理归属',
          trigger: 'blur'
        }],
        field119: [{
          required: true,
          message: '请输入进货的数量电子元器件电子元器件-进货数量',
          trigger: 'blur'
        }],
        field107: [{
          required: true,
          message: '请输入消耗的电子元器件数量',
          trigger: 'blur'
        }],
        field108: [{
          required: true,
          message: '请输入机械零部件的进货数量',
          trigger: 'blur'
        }],
        field109: [{
          required: true,
          message: '请输入机械零部件的消耗数量',
          trigger: 'blur'
        }],
        field110: [{
          required: true,
          message: '请输入其他原材料的进货数量',
          trigger: 'blur'
        }],
        field111: [{
          required: true,
          message: '请输入其他原材料的消耗数量',
          trigger: 'blur'
        }],
        field117: [{
          required: true,
          message: '砂MB值智能采集终端-新增任务量/台套',
          trigger: 'blur'
        }],
        field118: [{
          required: true,
          message: '',
          trigger: 'blur'
        }],
        field119: [{
          required: true,
          message: '',
          trigger: 'blur'
        }],
        field121: [{
          required: true,
          message: '',
          trigger: 'blur'
        }],
        field122: [{
          required: true,
          message: '',
          trigger: 'blur'
        }],
        field123: [{
          required: true,
          message: '',
          trigger: 'blur'
        }],
        field125: [{
          required: true,
          message: '',
          trigger: 'blur'
        }],
        field126: [{
          required: true,
          message: '',
          trigger: 'blur'
        }],
        field127: [{
          required: true,
          message: '',
          trigger: 'blur'
        }],
      },
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
  }
}

</script>
<style>
</style>
